Fox 2.0 Router 参数传递

路径参数传递

fox router允许把参数附加在path上面，并传递到子页面中

例子代码：sites/example/pages/params-pass

代码摘要

子页面

template: '<div>User {{ $route.params.id }}</div>'

路由配置

 const routes = [
       {
           path: '/user/:id',
           component:User,
       }
]

JS代码

    this.$router.push({
          path:'/user/江成',
          root:'_sys_root'
     })

说明

路由配置/user/:id, :id为参数的插槽，而导航中path：/user/江成中的'江成'就是对于中:id,在子页面中，我们通过$route.params.id就能获取到数据'江成'

代码参数传递

fox router在编程导航中，一般把参数放在params属性中进行传递

代码摘要

index.ts（路由注册）

//路由表
let routes = [
    {
        path:'/',
        redirect:'/home'
    },
    {
        path:'/home',
        component:()=>import('./components/home.vue'),
    },
    {
        path:'/about',
        component:()=>import('./components/about.vue'),
    },
]
export let FoxApp = {

    /***
     * 安装
     */
    install(fox:any){
        //设置404页面
        fox.router.setNotFoundRoute( {
            path:'/notFound',
            component: ()=>import('../not-found/index.vue'),
        },)
        //加入路由
        fox.router.addRoutes(routes)
    }

} 

index.vue（数据传递）

<template>
    <div>
        <div>
            <button class="my-button" @click="toHome">params方式</button>
            <button class="my-button" @click="toAbout">path方式</button>
            <button class="my-button" @click="toCat">props方式</button>
            <button class="my-button" @click="toDog">query方式</button>
        </div>
        <div>
            <fox-router-view :multi="false"></fox-router-view>
        </div>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { useFox, useRouter } from '@sites/example/utils/commons/use-apis.js'
import { FoxApp } from './index.ts'

export default defineComponent({
    setup() {
        let fox = useFox()
        // 安装路由
        FoxApp.install(fox)
        // 获取 router
        let router = useRouter()

        let toHome = () => {
            // 参数 target: 路由path，data: 页面传递数据，root: 替换的fox-router-view的名称
            router.push('/home', { target: 'home' })
        }
        let toAbout = () => {
            // 参数 target: 路由path，data: 页面传递数据，root: 替换的fox-router-view的名称
            router.push('/about/jiangcheng', { 'target:': '123' })
        }
        let toCat = () => {
            // 参数 target: 路由path，data: 页面传递数据，root: 替换的fox-router-view的名称
            router.push({ path: '/cat', params: { val: '江成' } })
        }
        let toDog = () => {
            // 参数 target: 路由path，data: 页面传递数据，root: 替换的fox-router-view的名称
            router.push('/dog?val=小白')
        }
        return {
            toHome,
            toAbout,
            toCat,
            toDog
        }
    }
})
</script>

</script>

home.vue（数据接收）

<template>
    <div>
        <div>Home</div>
        <div><input ref="input" type="text" :value="textValue" @change="onChange" @input="onInput" /></div>
    </div>
</template>
<script>
import { defineComponent, computed, ref, onMounted, onUnmounted } from '@vue/composition-api'
import { useRoute } from '@sites/example/utils/commons/use-apis.js'

export default defineComponent({
    // 属性
    props: {
        modelValue: {
            type: [String]
        }
    },
    // setup函数
    setup(props, context) {
        onMounted(() => {
            console.info('>>>> on mounted(home)')
        })
        onUnmounted(() => {
            console.info('---- on unmounted(home)')
        })

        let innerValue = ref('')
        let route = useRoute()
        if (route && route.params) {
            innerValue.value = route.params.target
        }

        let textValue = computed(() => innerValue.value ?? props.modelValue)

        let input = ref(null)
        let onChange = () => {
            let val = ''
            let inputNode = input.value
            if (inputNode) {
                val = inputNode.value ?? ''
            }
            innerValue.value = val
            context.emit('update:modelValue', val)
        }
        let onInput = () => {
            let val = ''
            let inputNode = input.value
            if (inputNode) {
                val = inputNode.value ?? ''
            }
            innerValue.value = val
            context.emit('update:modelValue', val)
        }
        return {
            onChange,
            onInput,
            input,
            textValue
        }
    }
})
</script>